<template>
  <view class="circle-progress" :style="{ width: diameter + 'px', height: diameter + 'px' }">
    <canvas :canvas-id="canvasId" :style="{ width: diameter + 'px', height: diameter + 'px' }"></canvas>
    <view class="circle-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    circleColor: {
      type: String,
      default: '#4db8ff'
    },
    circleBgColor: {
      type: String,
      default: '#eee'
    },
    diameter: {
      type: Number,
      default: 100
    },
    circleWidth: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      animatedValue: 0,
      canvasId: 'circleProgressCanvas'+ Number(new Date())
    };
  },
  // watch: {
  //   value: {
  //     immediate: true,
  //     handler(newVal) {
  //       this.animateProgress(newVal);
  //     }
  //   }
  // },
  // #ifdef H5
  mounted() {
    setTimeout(() => {
        this.animateProgress(this.value);
      }, 100);
  },
   // #endif
  // #ifdef APP-PLUS || APP-PLUS-NVUE
  onReady(){
	  setTimeout(() => {
	      this.animateProgress(this.value);
	    }, 100);
  },
  // #endif
  methods: {
    animateProgress(targetValue) {
		console.log(targetValue,'targetValuetargetValue222222222222222222222');
      const duration = 1000; // Animation duration in ms
      const startValue = this.animatedValue;
      const startTime = performance.now();

      const animate = (time) => {
        const elapsedTime = time - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        this.animatedValue = startValue + (targetValue - startValue) * progress;
        this.drawProgress();
        
        if (progress < 1) {
          requestAnimationFrame(animate);
        }
      };

      requestAnimationFrame(animate);
    },
    drawProgress() {
      const ctx = uni.createCanvasContext(this.canvasId, this);
      const radius = (this.diameter-10) / 2;
      const shadowOffset = 5; // Extra space for shadow
      const canvasDiameter = (this.diameter-10) + shadowOffset * 2;
      const lineWidth = this.circleWidth;

      // Clear previous drawing
      ctx.clearRect(0, 0, canvasDiameter, canvasDiameter);

      // Draw background circle
      ctx.beginPath();
      ctx.arc(radius + shadowOffset, radius + shadowOffset, radius - lineWidth / 2, 0, 2 * Math.PI, false);
      ctx.setStrokeStyle(this.circleBgColor);
      ctx.setLineWidth(lineWidth);
      ctx.stroke();
      ctx.closePath();

      // Draw progress circle with shadow
      const endAngle = -0.5 * Math.PI + 2 * Math.PI * this.animatedValue;

      ctx.beginPath();
      ctx.arc(radius + shadowOffset, radius + shadowOffset, radius - lineWidth / 2, -0.5 * Math.PI, endAngle, false);
      ctx.setStrokeStyle(this.circleColor);
      ctx.setLineWidth(lineWidth);
      ctx.setLineCap('round');
      ctx.setShadow(0, 0, 15, this.circleColor); // Add shadow with the same color as the progress
      ctx.stroke();
      ctx.closePath();

      ctx.draw(false, () => {
        uni.canvasToTempFilePath({
          canvasId: this.canvasId,
          success: (res) => {
            // this.$emit('canvasRendered', res.tempFilePath);
          },
          fail: (err) => {
            console.error(err);
          }
        }, this);
      });
    }
  }
};
</script>

<style scoped>
.circle-progress {
  position: relative;
  margin: 0rpx auto;
}
.circle-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
